<template>
  <!-- 气泡弹出框 -->

  <div class="top_box">
    <el-button type="primary" @click="edit('添加')">添加商品</el-button>
    <div>
      <el-input v-model="input3" class="w-50 m-2" size="small" placeholder="输入商品标题" :suffix-icon="Search" />
      <el-button type="primary" @click="onSreach()">搜索商品</el-button>
    </div>
  </div>

  <div>
    <Table :datasList="datasList" @handleClick="handleClick" @edit="edit" :title="title"></Table>
  </div>
  <!-- 分页 -->
  <div class="example-pagination-block">
    <el-pagination layout="prev, pager, next" @size-change="sizepage" @current-change="current" :total="pages.const" />
  </div>
  <!--弹出编辑 -->
  <el-dialog v-model="dialogFormVisible" :title="Shipping" @close="close">
    <el-form :model="form">
      <el-form-item label="商品名称" :label-width="formLabelWidth">
        <el-input v-model="form.forms.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品描述" :label-width="formLabelWidth">
        <el-input v-model="form.forms.introduce" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="edits">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">

import { computed, onMounted, reactive, ref, toRef } from 'vue';
import { getData } from '@/utils/api.ts'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import * as type from '@/type/login'
import Table from '@/components/table/index.vue'
let title = reactive([
  {
    prop: 'id',
    label: '序号',
    width: '120',
  }, {
    prop: 'title',
    width: '商品名称',
    label: '操作',
  }, {
    prop: 'introduce',
    label: '商品描述',
    width: '1000',
  },
])
const input3 = ref('')
let dialogFormVisible = ref<boolean>(false)
let datas = reactive({
  tableData: [
    {
      title: '',
      introduce: '',
      userId: '1',
      id: ''
    }
  ]
})


let Shipping = ref('输入框')
const formLabelWidth = '140px'
let form = reactive({
  forms: {
    title: '',
    introduce: '',
    userId: '1',
    id: ''
  }
})
interface pageType {
  size: number,
  const: number,
  pagesize: number,
}
const pages = reactive<pageType>({
  size: 1,
  const: 0,
  pagesize: 10,
})
let datasList = reactive({
  pagedata: computed(() => {
    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
    pages.const = datas.tableData.length
    return datas.tableData.slice((pages.size - 1) * pages.pagesize, pages.size * pages.pagesize)
  })
})
// console.log(datasList, '11111111111111111111111');
// let tableData = reactive([])
// let { _rawValue } = toRef(datas)
// console.log(_rawValue.tableData, '123343');

onMounted(async () => {
  console.log();
  await getData().then((res) => {
    if (res.code === 200) {
      pages.const = res.data.list.length
      console.log(pages.const, '1233131231');
      datas.tableData = toRef(res.data.list)
    }
  })

})
// 删除商品
const handleClick = (scope: any) => {
  // console.log(scope.row.id)
  console.log(datas.tableData);

  datas.tableData.forEach((item, index) => {
    // console.log(item);

    if (item.id === scope.row.id) {
      datas.tableData.splice(index, 1)
    }

  });
  ElMessage({
    type: 'success',
    message: '删除成功'
  })
}
// 编辑
const edit = (scope: any) => {
  if (scope === '添加') {
    Shipping.value = scope
    dialogFormVisible.value = true
  } else {
    Shipping.value = '编辑'
    dialogFormVisible.value = true
    form.forms.title = scope.row.title
    form.forms.introduce = scope.row.introduce
    form.forms.id = scope.row.id
    console.log(form, 'form');
  }
}
const edits = () => {
  console.log(form.forms);
  if (form.forms.id) {
    console.log('11111111111111111');
    
    console.log(form);
    datas.tableData.forEach((item, index) => {
      // console.log(item);
      dialogFormVisible.value = false
      if (item.id === form.forms.id) {
        datas.tableData.splice(index, 1, form.forms)
      }
    });
  } else {
    console.log(form, '添加');
    console.log();
    dialogFormVisible.value = false
    let ids =datas.tableData[datas.tableData.length-1].id+1
    datas.tableData.push({ ...form.forms,id:ids})
  }
}
// 搜索
const onSreach = async () => {
  await getData().then((res) => {
    if (res.code === 200) {
      pages.const = res.data.list.length
      console.log(pages.const, '1233131231');
      datas.tableData = toRef(res.data.list)
    }
  })
  console.log(input3);
  datas.tableData = datas.tableData.filter(v => v.title.includes(input3.value))
}
const current = (e: any) => {
  pages.size = e
  console.log(e);

}
const sizepage = (e: any) => {
  pages.size = e

  console.log(e);

}
// 关闭弹窗
const close = () => {
  // console.log('关闭了弹窗');
  form.forms = {
    title: '',
    introduce: '',
    userId: '1',
    id: ''
  }
}
</script>
<style scoped lang="less">
.top_box {
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
    justify-content: space-between;

    .el-button {
      margin-left: 20px;
    }

  }
}

#text {
  width: 100px;
  white-space: nowrap !important;
  /*（默认 normal 自动换行）*/
  /* 2．超出的部分隐藏*/
  overflow: hidden !important;
  /* 3．文字用省略号替代超出的部分 */
  text-overflow: ellipsis !important;
  color: red;
}
</style>